<template>
  <dialog-content :dialogOptions="dialogOptions || (new Date().getTime())">
    <template slot="dialog-content_content">
      <form-content ref="updatePasswordForm" :formOptions="formOptions" :formSource="formSource">
      </form-content>
    </template>
    <template slot="dialog-content_footer">
      <el-button :size="this.size" @click="dialogOptions.show = false">取消</el-button>
      <el-button :size="this.size" type="primary" @click="updatePasswordSubmit()">确定</el-button>
    </template>
  </dialog-content>
</template>

<script>
import DialogContent from '@/components/common/dialog-content'
import FormContent from '@/components/common/form-content'
export default {
  components: {
    DialogContent, FormContent
  },
  props: {
    size: {
      type: String,
      default: 'mini'
    }
  },
  data() {
    let validateConfirmPassword = (rule, value, callback) => {
      if (this.formSource.ruleForm.newPassword !== value) {
        callback(new Error('确认密码与新密码不一致'))
      } else {
        callback()
      }
    }
    return {
      dialogOptions: {
        title: '修改密码',
        show: false,
        modal: false,
        width: '400px',
        height: '200px',
        center: true,
        closeOnClickModal: true,
        closeOnClickEscape: true,
        destroyOnClose: true
      },
      formOptions: {
        inline: true,
        labelPosition: 'right',
        labelWidth: '100px',
        size: this.size
      },
      formSource: {
        operations: [
          {
            name: '账号',
            key: 'userName',
            type: 'text',
            width: '250px',
            disabled: true
          },
          {
            name: '原密码',
            key: 'oldPassword',
            type: 'text',
            showPassword: true,
            width: '250px',
            length: 30
          },
          {
            name: '新密码',
            key: 'newPassword',
            type: 'text',
            showPassword: true,
            width: '250px',
            length: 30
          },
          {
            name: '确认密码',
            key: 'newConfirmPassword',
            type: 'text',
            showPassword: true,
            width: '250px',
            length: 30
          }
        ],
        ruleForm: {},
        rules: {
          oldPassword: [{ required: true, message: '原密码不能为空', trigger: 'blur' }],
          newPassword: [{ required: true, message: '新密码不能为空', trigger: 'blur' }],
          newConfirmPassword: [
            { required: true, message: '确认密码不能为空', trigger: 'blur' },
            { validator: validateConfirmPassword, trigger: 'blur' }
          ]
        }
      }
    }
  },
  methods: {
    init() {
      if (this.$refs.updatePasswordForm !== undefined) {
        this.$refs.updatePasswordForm.init()
      }
      this.formSource.ruleForm = { userName: this.$store.getters.userName }
    },
    updatePasswordSubmit () {
      if (!this.$refs.updatePasswordForm.submitForm()) {
        return false
      }
      this.$store.dispatch('user/updatePassword', this.formSource.ruleForm).then(res => {
        this.$message({
          message: '操作成功',
          type: 'success',
          duration: 1000,
          onClose: () => {
            this.dialogOptions.show = false
            this.$router.replace({ name: 'login' })
          }
        })
      })
    }
  }
}
</script>

<style>
</style>
